<template>
  <el-tabs type="border-card" @tab-click="handleClick">
    <el-tab-pane
      :label="item.name"
      v-for="(item, index) of catalogAll"
      :key="index"
    >
      <el-divider content-position="left">已选</el-divider>
      <el-tag v-show="isAllShow">全部</el-tag>
      <el-tag v-if="isShow()" closable @close="catalogClose()">{{
        condition.checkedCatalog
      }}</el-tag>
      <el-tag
        v-if="condition.checkedSerialStatus"
        closable
        @close="statusClose()"
        >{{ condition.checkedSerialStatus }}</el-tag
      >
      <el-tag v-if="condition.checkedAttr" closable @close="attrClose()">{{
        condition.checkedAttr
      }}</el-tag>
      <el-tag v-if="condition.checkedWords" closable @close="wordClose()">{{
        condition.checkedWords
      }}</el-tag>
      <el-tag
        v-if="condition.checkUpdateTime"
        closable
        @close="updateTimeClose()"
        >{{ condition.checkUpdateTime }}</el-tag
      >
      <el-divider content-position="left">分类</el-divider>
      <div class="group" v-for="(arrItem, index) of catalogGroup" :key="index">
        <el-tag
          class="tag"
          v-for="catalog of arrItem"
          :key="catalog.name"
          @click="clCatalog(catalog.name, index)"
          >{{ catalog.name }}</el-tag
        >
        <div class="catalogItem" v-show="showCatalogItem[index]">
          <el-tag
            class="tag"
            v-for="catalogItem of catalogItems"
            :key="catalogItem.name"
            @click="clCatalogItem(catalogItem.name)"
            >{{ catalogItem.name }}</el-tag
          >
        </div>
      </div>
      <el-divider content-position="left">状态</el-divider>
      <div @click="clState">
        <el-tag conditionAttr="SERIALIZE">连载</el-tag>
        <el-tag conditionAttr="CONCLUDE">完本</el-tag>
      </div>
      <el-divider content-position="left">属性</el-divider>
      <div @click="clAttr">
        <el-tag conditionAttr="-1">免费</el-tag>
      </div>
      <el-divider content-position="left">字数</el-divider>
      <div @click="clWords">
        <el-tag conditionAttr="30">30万字以下</el-tag>
        <el-tag conditionAttr="50">30~50万字</el-tag>
        <el-tag conditionAttr="100">50~100万字</el-tag>
        <el-tag conditionAttr="200">100~200万字</el-tag>
        <el-tag conditionAttr="999">200万字以上</el-tag>
      </div>
      <el-divider content-position="left">更新时间</el-divider>
      <div @click="clUpdateTime">
        <el-tag conditionAttr="3">三日内</el-tag>
        <el-tag conditionAttr="7">七日内</el-tag>
        <el-tag conditionAttr="15">半月内</el-tag>
        <el-tag conditionAttr="30">一月内</el-tag>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import {dataConfig}  from '@/config/mixin'
export default {
  mixins:[dataConfig],
  data() {
    return {
      isAllShow: true,
      condition: {
        checkedCatalog: "",
        catalogLevel: 0,
        checkedSerialStatus: "",
        checkedAttr: "",
        checkedWords: "",
        checkUpdateTime: "",
      },
      checkedTopCatalogIndex: 0,
      checkedTopCatalogName: "",
      //显示那几行的三级分类
      showCatalogItem: [],
      //一行显示几列
      column: 4,
      //已选
      selected: [],
      catalogs: [],
      catalogItems: [],
    };
  },
  computed: {
    ...mapState("remoteData", ["catalogAll"]),
    catalogGroup: {
      get() {
        let arr = [];
        let itemArr = [];
        let showCa = [];
        this.catalogs.forEach((element, index) => {
          itemArr.push(element);
          if ((index + 1) % this.column != 0) {
            if (index + 1 == this.catalogs.length) {
              showCa.push(false);
              arr.push(itemArr);
              this.showCatalogItem = showCa;
              itemArr = [];
            }
          } else {
            showCa.push(false);
            arr.push(itemArr);
            if (index + 1 == this.catalogs.length) {
              this.showCatalogItem = showCa;
              itemArr = [];
            }
          }
        });
        return arr;
      },
    },
  },
  methods: {
    ...mapActions("remoteData", ["getCatalog", "selectBookListPage"]),
    isShow() {
      let flg = false;
      for (let i = 0; i < this.catalogAll.length; i++) {
        flg =
          this.condition.checkedCatalog != "" &&
          this.catalogAll[i].name != this.condition.checkedCatalog;
        if (!flg) {
          break;
        }
      }
      if (!flg) {
        //判断是否为空
        if (this.isEmptyObjA()) {
          this.isAllShow = true;
        }
      }
      return flg;
    },
    isEmptyObj(obj) {
      if (this.condition.checkedCatalog) {
        return false;
      }
      if (this.condition.checkedSerialStatus) {
        return false;
      }
      if (this.condition.checkedAttr) {
        return false;
      }
      if (this.condition.checkedWords) {
        return false;
      }
      if (this.condition.checkUpdateTime) {
        return false;
      }
      return true;
    },
    isEmptyObjA() {
      if (this.condition.checkedSerialStatus) {
        return false;
      }
      if (this.condition.checkedAttr) {
        return false;
      }
      if (this.condition.checkedWords) {
        return false;
      }
      if (this.condition.checkUpdateTime) {
        return false;
      }
      return true;
    },
    catalogClose() {
      this.condition.checkedCatalog = "";
      this.condition.catalogLevel = 0;
    },
    statusClose() {
      this.condition.checkedSerialStatus = "";
    },
    attrClose() {
      this.condition.checkedAttr = "";
    },
    wordClose() {
      this.condition.checkedWords = "";
    },
    updateTimeClose() {
      this.condition.checkUpdateTime = "";
    },

    clCatalog(catalog, catalogGroupId) {
      for (let index = 0; index < this.showCatalogItem.length; index++) {
        this.$set(this.showCatalogItem, index, false);
      }
      this.$set(this.showCatalogItem, catalogGroupId, true);
      this.catalogs.forEach((element) => {
        if (element.name == catalog) {
          this.catalogItems = element.children;
        }
      });
      this.condition.checkedCatalog = catalog;
      this.condition.catalogLevel = 1;
    },
    clCatalogItem(catalog) {
      this.condition.checkedCatalog = catalog;
      this.condition.catalogLevel = 2;
    },
    //当用户点击顶级标签时
    handleClick(tab, event) {
      console.log("顶级", tab);
      if (tab.label != this.checkedTopCatalogName) {
        //更换数据
        this.catalogs = this.catalogAll[tab.index].children;
        this.checkedTopCatalogName = tab.label;
        this.checkedTopCatalogIndex = tab.index;
        this.condition = {
          checkedCatalog: "",
          catalogLevel: 0,
          checkedSerialStatus: "",
          checkedAttr: "",
          checkedWords: "",
          checkUpdateTime: "",
        };
      }
    },
    clState(event) {
      this.condition.checkedSerialStatus =
        event.target.getAttribute("conditionAttr");
    },
    clAttr(event) {
      this.condition.checkedAttr = event.target.getAttribute("conditionAttr");
    },
    clWords(event) {
      this.condition.checkedWords = event.target.getAttribute("conditionAttr");
    },
    clUpdateTime(event) {
      let reductionTime =
        1000 * 60 * 60 * 24 * event.target.getAttribute("conditionAttr");
      console.log(reductionTime);
      let time = new Date().getTime() - reductionTime;
      this.condition.checkUpdateTime = this.dateFormat(
        "yyyy-MM-dd HH:mm:ss:SSS",
        new Date(time)
      );
    },
  },
  watch: {
    //监听catalogAll变化
    catalogAll(newValue, oldVal) {
      console.log("catalogAll变化", newValue);
      this.catalogs = newValue[this.checkedTopCatalogIndex].children;
    },
    condition: {
      handler(newValue) {
        console.log("condition变化", newValue);
        this.isAllShow = this.isEmptyObj(this.condition);
        // if (this.condition.catalogLevel == 0) {
        //   this.condition.checkedCatalog =
        //     this.catalogAll[this.checkedTopCatalogIndex].name;
        // }
        //TODO:修改分页数据
        this.selectBookListPage(this.condition);
      },
      deep: true,
    },
  },
  created() {
    this.getCatalog();
  },
};
</script>

<style scoped>
.group {
  /* 容器指定为Flex布局 */
  display: flex;
  /* 主轴为水平方向，起点在左端。 */
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  /* 项目的第一行文字的基线对齐。 */
  align-items: baseline;
}
.catalogItem {
  /* 容器指定为Flex布局 */
  display: flex;
  /* 主轴为水平方向，起点在左端。 */
  flex-direction: row;
  /* 如果一条轴线排不下，换行。 */
  flex-wrap: wrap;
  /* 主轴上的对齐方式。左对齐 */
  justify-content: space-around;
  /* 项目的第一行文字的基线对齐。 */
  align-items: baseline;
  background-color: #f7f6f2;
}
.tag {
  background-color: #ffffff;
  color: #333333;
}
.tag:hover {
  color: red;
}
</style>
